import { defineComponent, ref } from 'vue'
import * as echarts from 'echarts'
import { getLineageInfo } from '@/service/modules/integration-assets'
import { useRouter } from 'vue-router'
import { useMessage } from 'naive-ui'

const infoLineage = defineComponent({
  name: 'infoLineage',
  setup() {
    const cdata = ref([])
    const link = ref([])
    const setChartData = function () {
      const option: any = {
        title: {
          text: '血缘关系',
          left: 'left'
        },
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            type: 'graph',
            layout: 'none',
            symbolSize: 50,
            roam: true,
            label: {
              show: true
            },
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              fontSize: 20
            },
            data: cdata.value,
            links: link.value,
            lineStyle: {
              opacity: 0.9,
              width: 2,
              curveness: 0
            }
          }
        ]
      }
      const dom: any = document.getElementById('categoryChart')
      const myChart = echarts.init(dom)
      myChart.clear()
      myChart.setOption(option)
    }

    const router = useRouter()

    const getInfo = function () {
      getLineageInfo(
        // @ts-ignore
        router.currentRoute.value.query.schemaName,
        router.currentRoute.value.query.tableName
      )
        .then((res: any) => {
          cdata.value = res.data
          link.value = res.link
        })
        .catch((err: any) => {
          message.error(err.msg ? err.msg : '接口未知错误')
        })
    }

    getInfo()

    const message = useMessage()

    return {
      setChartData,
      cdata,
      link,
      router,
      getInfo,
      message
    }
  },
  render() {
    return <div id='categoryChart' style='width: 1800px; height: 1100px' />
  }
})

export default infoLineage
